<template>
  <div class="dialog_info">
    <div class="dialog_info_title">
      <div class="dialogTab" style="margin-top:10px">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == item.ind }"
          class="tabTit"
          @click="changeDig(item.ind)"
        >
          {{ item.name }}
        </span>
      </div>
      <div v-for="(item, index) in tabTitList" :key="index" v-show="selectNum == item.ind" class="water-table">
        <rainInfo ref="rainInfo" v-if="item.typ == 'rainInfo'" />
        <FloodAnalysisInfo v-if="item.typ == 'floodAnalysisInfo'" />
        <VillageDetails v-if="item.typ == 'villageDetails'" />
        <addressList v-if="item.typ == 'addressList'" />
        <multisiteRain ref="multisiteRain" v-if="item.typ == 'multisiteRain'"></multisiteRain>
        <multisiteRain ref="rainFall" v-if="item.typ == 'rainFall'"></multisiteRain>
     </div>

    </div>
  </div>
</template>
<script>
let tabTitListold = [ 
    {'name':'降雨过程','ind':'0','typ':'rainInfo'},
    {'name':'洪水分析','ind':'1','typ':'floodAnalysisInfo'},
    {'name':'村庄详情','ind':'2','typ':'villageDetails'}, 
    {'name':'通讯录','ind':'3','typ':'addressList'},
    {'name':'雨情信息','ind':'5','typ':'multisiteRain'},
    {'name':'降雨过程','ind':'6','typ':'rainFall'},
  ];
import FloodAnalysisInfo from '@/views/main/prediction/ShortPro/FloodAnalysisInfo'
import VillageDetails from './VillageDetails.vue'
// import rainInfo from './rainInfo.vue'
import addressList from './addressList.vue'


export default {
    components: {
        FloodAnalysisInfo,
        VillageDetails,
        // rainInfo,
        addressList,
        'multisiteRain': () => import('@/views/components/multisiteRain.vue'),//多站点雨量
        'rainInfo': () => import('@/views/components/rainInfo.vue'),//降雨过程
    },
     props: {
        listStyleobj: {
            type: Object,
           // default: () => ({})
            default(){
              return {};
            }
        },
        tablist:{
          type:Array,
          default(){
            return [];
          },

        },
         
     },
    data() {
        return {
            selectNum: 0,
            tabTitList:[ {'name':'村庄详情','ind':'2','typ':'villageDetails'}, {'name':'通讯录','ind':'3','typ':'addressList'}],
            // ['降雨过程','洪水分析', '村庄详情', '通讯录'], // '预警过程'
            ProtectionData: [],
            parameter: {},
            tab2: false,
            tab3: false,
            tab4: false,
            isJCYJ: false,
            proteloading: false
        }
    },
    created() {

      let tabls = this.tablist;
      console.log('tabls',tabls);
      
      if(tabls.length){
         let tabNew = []
         tabls.forEach((item) => {
          tabTitListold.filter(ite=>{
            if(ite.ind == item){
               tabNew.push(ite)
            }
          })

        });
         this.tabTitList = tabNew.length?[...tabNew, ... this.tabTitList]:this.tabTitList;
      }
      this.selectNum = this.tabTitList[0].ind;
      
      let listSty = this.listStyleobj;
      if(Object.keys(listSty).length != 0){
        listSty.enTime? this.$store.getters.dlgParams.params['perioD_END']= listSty.enTime:'';
        listSty.stTime? this.$store.getters.dlgParams.params['strBegin']= listSty.stTime:'';
        listSty.enTime? this.$store.getters.dlgParams.params['strEnd']= listSty.enTime:'';
        listSty.Ewcode? this.$store.getters.dlgParams.params['Ewcode']= listSty.Ewcode:'';
      }

      this.parameter = this.$store.getters.dlgParams.params;
       // console.log(this.parameter)
     
    },
    methods: {
        changeDig(index) {
            this.selectNum = index
           if(index == '5'){//如果是 ind 是5 雨情信息 
             this.$refs.multisiteRain[0].handleRisz();
           }else if(index == '6'){
              this.$refs.rainInfo[0].handleRisz();
           }else if(index == '0'){
              this.$refs.rainInfo[0].handleRisz();
           }
        },
       
    }
}
</script>
<style lang="less" scoped>
 .tab{
        border-bottom: 1px solid #335875;
        padding-bottom: 15px;
        height: auto;
        overflow: hidden;
    }
	/deep/.el-tabs__nav-scroll {
		justify-content: left !important;
	}

	.dialog_info {
    min-height: 100%;
    max-height: max-content;

		.dialog_info_title {
			min-height: 100%;
      max-height: max-content;

			/deep/.el-tabs {
				height: 100%;
			}
		}

	}

	/deep/.el-tab-pane {
		height: 100%;
	}
	.water-table{
    padding: 0 20px 20px;
    //min-height: calc(100% - 40px);
    //max-height: max-content;
    //max-height: 755px;
    height: 700px;
    overflow:auto;
	}
 .watTab{
  height: calc(100% - 40px);
 }
  .noData{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0px;
  }
</style>
